<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 上传 -->
      <div style="display: inline-block;margin: 0px 2px;">
        <el-button
          v-permission="['ADMIN']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add">上传</el-button>
      </div>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="doDeltaIndex">创建索引</el-button>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="doFullIndex">重建索引</el-button>
    </div>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
      <el-table-column :min-width="400" prop="content" label="内容">
        <template slot-scope="file">
          <mavon-editor
            ref="md"
            v-model="file.row.content[0]"
            :subfield="false"
            :font-size="'0px'"
            :short-cut="false"
            :transition="false"
            :preview-background="'#ffffff'"
            :auto-focus="false"
            :box-shadow="false"
            :default-open="'preview'"
            :toolbars-flag="false"
            :editable="false"
            :scroll-style="false"
            :ishljs="false"
            style="min-height: 80px; z-index:0;"/>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="id" label="路径"/> -->
      <el-table-column :min-width="40" prop="size" label="大小"/>
      <el-table-column prop="author" label="作者"/>
      <el-table-column prop="lastModified" label="最后修改">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastModified) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
import { fullIndex, deltaIndex } from '@/api/solrFile'
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import { parseTime } from '@/utils/index'
import eForm from './form'
export default {
  components: { eForm },
  mixins: [initData],
  data() {
    return {
      delLoading: false,
      queryTypeOptions: [
        { key: 'id', display_name: '路径' },
        { key: 'size', display_name: '大小' },
        { key: 'author', display_name: '作者' },
        { key: 'lastModified', display_name: '最后修改' },
        { key: 'content', display_name: '内容' }
      ]
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseTime,
    checkPermission,
    beforeInit() {
      this.url = 'solr/search-advance'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const type = query.type
      const value = query.value
      this.params['type'] = type === undefined ? 'content' : type
      this.params['value'] = value === undefined ? '' : value
      return true
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    doFullIndex() {
      fullIndex().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err.response.data.message)
        console.log('Failed to reIndex')
      })
    },
    doDeltaIndex() {
      deltaIndex().then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err.response.data.message)
        console.log('Failed to deltaIndex')
      })
    },
    edit(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = {
        id: data.id,
        size: data.size,
        author: data.author,
        lastModified: data.lastModified,
        content: data.content
      }
      _this.dialog = true
    }
  }
}
</script>

<style scoped>

</style>
